<template>
  <div id="dswd-home-three">
    <div v-if="device==='desktop'" class="dswd-home-three">
      <div class="three-top" />
      <div class="three-icon">
        <img src="../../assets/image/home/three/perfect-icon.png" alt="perfect-icon">
      </div>
      <div class="three-sub-title">设计成果符合国家标准和行业规范，无差错、零强条、经济合理</div>
      <div class="three-wrap">
        <div class="block left">
          <div class="left-title">数据通用CAD及REVIT软件</div>
          <div class="left-sub-title">大智绘数据成果可在CAD与REVIT软件呈现——更方便</div>
          <div class="left-dividing-line" />
          <div class="left-flow-chart">
            <img src="../../assets/image/home/three/flow-chart.png" alt="flow-chart">
          </div>
        </div>
        <div class="block right">
          <div class="right-block">
            <div class="right-block-info">
              <div class="right-block-title">
                施工图纸可 <span class="title-import">多平台</span> 呈现
              </div>
              <div class="right-block-sub-title">设计成果二维三维互联互通，数据稳定可靠</div>
              <div class="bottom-dividing-line" />
            </div>
            <div class="right-block-img">
              <img src="../../assets/image/home/three/mult-plat.png" alt="mult-plat">
            </div>
          </div>
          <div class="right-block-dividing" />
          <div class="right-block">
            <div class="right-block-info">
              <div class="right-block-title">
                图纸成果 <span class="title-import">精准可靠</span>
              </div>
              <div class="right-block-sub-title">多项目测试迭代，实现成果零错误</div>
              <div class="bottom-dividing-line" />
            </div>
            <div class="right-block-img">
              <img src="../../assets/image/home/three/acc-reli.png" alt="acc-reli">
            </div>
          </div>
        </div>
      </div>
      <div class="three-dividing-line" />
    </div>
    <div v-if="device==='ipad'" class="dswd-p-home-three">
      <div class="three-top" />
      <div class="three-icon">
        <img src="../../assets/image/home/three/perfect-icon.png" alt="perfect-icon">
      </div>
      <div class="three-sub-title">设计成果符合国家标准和行业规范，无差错、零强条、经济合理</div>
      <div class="three-wrap">
        <div class="block top">
          <div class="top-title">数据通用CAD及REVIT软件</div>
          <div class="top-sub-title">TransBIM（大智绘）绘数据成果可在CAD与REVIT软件呈现——更方便</div>
          <div class="top-dividing-line" />
          <div class="top-flow-chart">
            <img src="../../assets/image/home/three/flow-chart.png" alt="flow-chart">
          </div>
        </div>
        <div class="block bottom">
          <div class="bottom-block">
            <div class="bottom-block-info">
              <div class="bottom-block-title">
                施工图纸可 <span class="title-import">多平台</span> 呈现
              </div>
              <div class="bottom-block-sub-title">设计成果二维三维互联互通，数据稳定可靠</div>
              <div class="bottom-dividing-line" />
            </div>
            <div class="bottom-block-img">
              <img src="../../assets/image/home/three/mult-plat.png" alt="mult-plat">
            </div>
          </div>
          <div class="bottom-block-dividing" />
          <div class="bottom-block">
            <div class="bottom-block-info">
              <div class="bottom-block-title">
                图纸成果 <span class="title-import">精准可靠</span>
              </div>
              <div class="bottom-block-sub-title">多项目测试迭代，实现成果零错误</div>
              <div class="bottom-dividing-line" />
            </div>
            <div class="bottom-block-img">
              <img src="../../assets/image/home/three/acc-reli.png" alt="acc-reli">
            </div>
          </div>
        </div>
      </div>
      <div class="m-bottom-divide" />
    </div>
    <div v-if="device==='mobile'" class="dswd-m-home-three">
      <div class="three-top" />
      <div class="three-icon">
        <img src="../../assets/image/home/three/perfect-icon.png" alt="perfect-icon">
      </div>
      <div class="three-sub-title">设计成果符合国家标准和行业规范，无差错、零强条、经济合理</div>
      <div class="three-wrap">
        <div class="block top">
          <div class="top-title">数据通用CAD及REVIT软件</div>
          <div class="top-sub-title">大智绘数据成果可在CAD与REVIT软件呈现——更方便</div>
          <div class="top-dividing-line" />
          <div class="top-flow-chart">
            <img src="../../assets/image/home/three/flow-chart.png" alt="flow-chart">
          </div>
        </div>
        <div class="block bottom">
          <div class="bottom-block">
            <div class="bottom-block-info">
              <div class="bottom-block-title">
                施工图纸可 <span class="title-import">多平台</span> 呈现
              </div>
              <div class="bottom-block-sub-title">设计成果二维三维互联互通，数据稳定可靠</div>
              <div class="bottom-dividing-line" />
            </div>
            <div class="bottom-block-img">
              <img src="../../assets/image/home/three/mult-plat.png" alt="mult-plat">
            </div>
          </div>
          <div class="bottom-block-dividing" />
          <div class="bottom-block">
            <div class="bottom-block-info">
              <div class="bottom-block-title">
                图纸成果 <span class="title-import">精准可靠</span>
              </div>
              <div class="bottom-block-sub-title">多项目测试迭代，实现成果零错误</div>
              <div class="bottom-dividing-line" />
            </div>
            <div class="bottom-block-img">
              <img src="../../assets/image/home/three/acc-reli.png" alt="acc-reli">
            </div>
          </div>
        </div>
      </div>
      <div class="m-bottom-divide" />
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
    data() {
        return {
          hoverId: null,
          navId: '1'
        }
    },
    computed: {
      ...mapState({
        device: (state) => state.app.device
      })
    },
    methods: {
      navClick(navId) {
        this.navId = navId
      }
    }
}
</script>

<style lang="scss" scoped>
@import "~@/styles/home/three.scss";
</style>
